<template>
	<view class="card u-margin-top-30 u-padding-left-20 u-padding-right-20">
		<view class="card-head u-padding-top-30 u-padding-bottom-30  " :class="BorderClass">
			<slot name="head"></slot>
		</view>
		<template v-if="showBodySlot && $slots.body">
			<view class="card-body  u-padding-bottom-30">
				<slot name="body"></slot>
			</view>
		</template>
		<template v-if="$slots.footer">
			<!-- u-padding-top-30 -->
			<view class="card-footer ">
				<slot name="footer"></slot>
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
		props: {
			showBodySlot: {
				type: Boolean,
				default: true
			},
			border: {
				type: Boolean,
				default: true
			}
		},
		computed: {

			BorderClass() {
				if (this.border) {
					return 'u-border-bottom'
				}
				return ''
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .u-cell {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	::v-deep .u-field {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	::v-deep .u-label-text {
		color: #98A5B3 !important;
	}

	::v-deep .u-cell__right-icon-wrap {
		color: #409EFF !important;
	}

	::v-deep .u-cell--required::before {
		left: -15rpx !important;
		top: 15rpx !important;
		color: #F56C6C !important;
	}

	::v-deep .u-required::before {
		left: -15rpx !important;
		top: 0rpx !important;
		color: #F56C6C !important;
	}

	.card {
		background: #FFFFFF;
		box-shadow: 0 32rpx 10rpx -10rpx #E6EBF2;
		border-radius: 20rpx;

		&-head {
			padding: 30rpx 0;
			font-family: AlibabaPuHuiTi_2_75_S0pxiBold;
			font-weight: 600;
			font-size: 32rpx;
			color: #0F2E4D;
		}

		&-footer {
			padding-top: 30rpx;
		}
	}
</style>
